<script setup>
import { ref, reactive } from 'vue'

const formData = reactive({
  username: '',
  password: ''
})

const errorMsg = ref('')
const loading = ref(false)

function handleLogin() {
  // 简单的表单验证
  if (!formData.username || !formData.password) {
    errorMsg.value = '用户名和密码不能为空'
    return
  }
  
  errorMsg.value = ''
  loading.value = true
  
  // 模拟登录请求
  setTimeout(() => {
    // 这里应该是实际的登录API调用
    // 检查是否是注册用户
    const users = uni.getStorageSync('users') || []
    const user = users.find(u => u.username === formData.username && u.password === formData.password)
    
    // 如果是注册用户或默认管理员账号
    if (user || (formData.username === 'admin' && formData.password === '123456')) {
      // 保存登录状态到本地存储
      uni.setStorageSync('isLoggedIn', true)
      
      // 获取完整的用户信息
      const userInfo = user || {
        username: 'admin',
        accountType: 'admin',
        membershipLevel: 'premium',
        loginTime: new Date().getTime()
      }
      
      // 添加登录时间
      userInfo.loginTime = new Date().getTime()
      
      // 保存用户信息
      uni.setStorageSync('userInfo', userInfo)
      
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        mask: true
      })
      
      // 跳转到首页，缩短延迟时间
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/home/index',
          success: function() {
            console.log('登录成功后导航到首页成功')
          },
          fail: function(err) {
            console.error('登录成功后导航到首页失败', err)
          }
        })
      }, 800) // 缩短延迟时间，让页面跳转更快
    } else {
      errorMsg.value = '用户名或密码错误'
    }
    loading.value = false
  }, 1000)
}

function goToRegister() {
  uni.navigateTo({
    url: '/pages/login/register',
    success: function() {
      console.log('导航到注册页成功');
    },
    fail: function(err) {
      console.error('导航到注册页失败', err);
    }
  })
}
</script>

<template>
  <view class="container">
    <view class="header">
      
      <view class="title">知录我&健康-中医健康管家</view>
    </view>
    
    <view class="login-form">
      <view class="form-item">
        <text class="label">用户名</text>
        <input 
          class="input" 
          v-model="formData.username" 
          placeholder="请输入用户名" 
          type="text"
        />
      </view>
      
      <view class="form-item">
        <text class="label">密码</text>
        <input 
          class="input" 
          v-model="formData.password" 
          placeholder="请输入密码" 
          type="password"
        />
      </view>
      
      <view v-if="errorMsg" class="error-msg">{{ errorMsg }}</view>
      
      <button 
        class="login-btn" 
        :disabled="loading" 
        :loading="loading" 
        @tap="handleLogin"
      >
        {{ loading ? '登录中...' : '登录' }}
      </button>
      
      <view class="tips">
        <text>默认用户名: admin</text>
        <text>默认密码: 123456</text>
        <text @tap="goToRegister" class="register-link">没有账号？点击注册</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60rpx 0;
  
  .logo {
    width: 180rpx;
    height: 180rpx;
    margin-bottom: 20rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.login-form {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
  margin-top: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .form-item {
    margin-bottom: 30rpx;
    
    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 15rpx;
      display: block;
    }
    
    .input {
      width: 100%;
      height: 80rpx;
      background-color: #f8f8f8;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
  }
  
  .error-msg {
    color: #ff4d4f;
    font-size: 24rpx;
    margin-bottom: 20rpx;
  }
  
  .login-btn {
    width: 100%;
    height: 80rpx;
    background-color: #1890ff;
    color: #fff;
    border-radius: 8rpx;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;
    
    &:active {
      opacity: 0.8;
    }
  }
  
  .tips {
    margin-top: 30rpx;
    font-size: 24rpx;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .register-link {
      margin-top: 10rpx;
      color: #1890ff;
      text-decoration: underline;
    }
  }
}
</style>